<template>
  <div :style="{width: '100%', height: '400px'}">
    <div>
      <h2 style="padding-top: 20px">治疗方案偏好</h2>
      <div id="treat1" :style="{width: '100%', height: '50px'}"></div>
    </div>
    <div>
      <h2 style="padding-top: 20px">药物治疗分类</h2>
      <div id="treat2" :style="{width: '100%', height: '50px'}"></div>
    </div>
  </div>
</template>

<script>
  let echarts = require('echarts/lib/echarts');
  export default {
    data() {
      return {
      }
    },
    mounted() {
      this.drawLine();
      this.treat2();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('treat1'));
        // 绘制图表
        var option = {
          tooltip : {
            trigger: 'item',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            backgroundColor: 'rgba(255,255,255,0.7)',
            borderColor: '#cee5ff',
            borderWidth: 1,
            padding: [5, 10],
            textStyle: {
              color: '#444'
            },
            formatter:function(params){
              return '<div style="height:30px;line-height: 30px;">' + params.name + '</div>' + '<div style="height: 40px;line-height: 40px;">' + params.data.name + ': <span style="color: ' + params.color + ';">' + params.value + '%</span></div>';
            }
          },
          color: ['#e34c4c', '#3a8eff'],
          xAxis: [{
            type: 'value',
            show: false
          }],
          yAxis: [{
            type: 'category',
            show: false,
            data: ['']
          }],
          series: [{
            type: 'bar',
            stack: '控糖指标重要性',
            barWidth: 10,
            label: {
              normal: {
                show: true,
                position: 'left',
              }
            },
            data: [{
              name: '药物治疗',
              value: '60',
              label: {
                position: 'left',
                normal: {
                  formatter: [
                    '药物治疗'
                  ].join('\n')
                }
              }
            }]
          },
            {
              type: 'bar',
              stack: '控糖指标重要性',
              barWidth: 10,
              label: {
                normal: {
                  show: true,
                  position: 'right'
                }
              },
              data: [{
                name: '与放疗联合应用的化疗方案',
                value: '40',
                label: {
                  normal: {
                    formatter: [
                      '与放疗联合应用的化疗方案'
                    ].join('\n')
                  }
                }
              }]
            }
          ]
        };
        myChart.setOption(option, true);
        myChart.on('click',function(obj) {
          var data = obj.data;

        });
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      },
      treat2(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('treat2'));
        // 绘制图表
        var option = {
          tooltip : {
            trigger: 'item',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            backgroundColor: 'rgba(255,255,255,0.7)',
            borderColor: '#cee5ff',
            borderWidth: 1,
            padding: [5, 10],
            textStyle: {
              color: '#444'
            },
            formatter:function(params){
              return '<div style="height:30px;line-height: 30px;">' + params.name + '</div>' + '<div style="height: 40px;line-height: 40px;">' + params.data.name + ': <span style="color: ' + params.color + ';">' + params.value + '%</span></div>';
            }
          },
          color: ['#e34c4c', '#3a8eff'],
          xAxis: [{
            type: 'value',
            show: false
          }],
          yAxis: [{
            type: 'category',
            show: false,
            data: ['']
          }],
          series: [{
            type: 'bar',
            stack: '治疗手段偏好',
            barWidth: 10,
            label: {
              normal: {
                show: true,
                position: 'left',
              }
            },
            data: [{
              name: '化疗药物',
              value: '30',
              label: {
                position: 'left',
                normal: {
                  formatter: [
                    '化疗药物'
                  ].join('\n')
                }
              }
            }]
          },
            {
              type: 'bar',
              stack: '治疗手段偏好',
              barWidth: 10,
              label: {
                normal: {
                  show: true,
                  position: 'right'
                }
              },
              data: [{
                name: '分子靶向药物',
                value: '70',
                label: {
                  normal: {
                    formatter: [
                      '分子靶向药物'
                    ].join('\n')
                  }
                }
              }]
            }
          ]
        };
        myChart.setOption(option, true);
        myChart.on('click',function(obj) {
          var data = obj.data;

        });
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      }
    }
  }
</script>

<style scoped>

</style>
